<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function faceChange(){
            //得到下拉框对象
            var selectObj = document.getElementById("faceSelect");

            //弹出消息框，会阻塞
            // alert(selectObj.value);
            // //在控制台打印
            // console.log("*********");
            //得到图片对象
            var imgObj = document.getElementById("faceImg");
            if(selectObj.value == "1"){
                imgObj.src = "img/3.jpg";
            }
            else if(selectObj.value == "2"){
                imgObj.src = "img/4.jpg";
            }
        }

        function changeImg(selectObj){
            document.getElementById("faceImg").src = selectObj.value;
            document.getElementById("bodyObj").style.backgroundImage
                ="url("+selectObj.value+")";
        }
    </script>
</head>
<body id="bodyObj">
    <img src="img/3.jpg" width="300" height="300" id="faceImg"><br>
    <!--onchange()表示当下拉框选项变化时，触发的事件-->
    <select id="faceSelect" onchange="changeImg(this)">
        <option value="img/3.jpg">春香</option>
        <option value="img/4.jpg">夏香</option>
        <option value="img/5.jpg">秋香</option>
        <option value="img/6.jpg">冬香</option>
    </select>
</body>
</html>